<template>
  <component :is="transStyle.border" 
  :color="color" 
  :backgroundColor="transStyle.backgroundColor" 
  :reverse="transStyle.reverse" 
  :dur="transStyle.dur" 
  :title="transStyle.title" 
  :titleWidth="transStyle.titleWidth" 
  :style="styleColor">
  </component>
</template>

<script>
export default {
  name: "WidgetBorder",
  components: {},
  props: {
    value: Object
  },
  data() {
    return {
      options: {
        setup: []
      }
    };
  },
  computed: {
    transStyle() {
      let options = Object.assign({}, this.options.setup)
      options = Object.assign(options, this.options.position)
      return options
    },
    color() {
      return this.transStyle.customColor.map(item => {return item.color})
    },
    styleColor() {
      return {
        position: "absolute",
        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        zIndex: this.transStyle.zIndex
      };
    }
  },
  watch: {
    value: {
      handler(val) {
        this.options = val
      },
      deep: true
    }
  },
  mounted() {
    this.options = this.value
  }
};
</script>

<style scoped lang="less">
.text {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
